<template>
    <div style="padding: 10px 40px;">
        <el-table :data="paperList" style="width: 100%">
            <el-table-column prop="name" width="288" label="试卷名"></el-table-column>
            <el-table-column prop="projectName" width="138" label="科目"> </el-table-column>
            <el-table-column prop="limitTime" width="100" label="限时(min)"> </el-table-column>
            <el-table-column prop="totalScore" width="100" label="总分"> </el-table-column>
            <el-table-column prop="createTime" width="168" label="发布时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <span class="text-button" @click="answerPaper(scope.row)">答题</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            key: '关键词',
            paperList: []
        }
    },
    mounted() {
        this.getKey();
    },
    methods: {
        answerPaper(paper) {
            //跳之前，先存储卷子信息
            sessionStorage.setItem('paperInfo', JSON.stringify(paper));
            // 跳到答题页面
            this.$router.push('/answerPaper');
        },
        getKey() {
            setInterval(() => {
                const searchKey = sessionStorage.getItem('searchKey');
                if (searchKey !== this.key) {
                    this.key = searchKey;
                    this.loadPaper();
                    return;
                }
            }, 100)
        },
        async loadPaper() {
            const params = { name: this.key }
            const response = await this.$axios.post('/paper/query', params);
            const { data } = response;
            if (data.code === 200) {
                this.paperList = data.data;
            }
        },
    }
};
</script>

<style scoped lang="scss"></style>